<template>
	<view class="home">
		<!--轮播图-->
		<swiper class="swiper" circular :indicator-dots="indicatorDots" indicator-active-color="#66BB6A" indicator-color="#000" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item class="swiper-item" v-for=" item in imgUrls" :key="item.id">
				<image :src="item.url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!--导航条-->
		<view class="nav">
			<view class="nav-item nav-item-first"  @click="navigatorToTaskCenterPage">
				<!-- 图标 -->
				<view class="icon1 iconfont icon-renwuzhongxin"></view>
				<!-- 名称 -->
				<text>任务中心</text>
			</view>
			<view class="nav-item" @click="navigatorToTestCenterPage(0)">
				<!-- 图标 -->
				<view class="icon2 iconfont icon-shijuanguanli-copy"></view>
				<!-- 名称 -->
				<text>试卷中心</text>
			</view>
			<!-- <view class="nav-item" @click="navigatorToVideoLessonPage">
				
				<view class="icon3 iconfont icon-jiangshi"></view>
				
				<text>视频课堂</text>
			</view> -->
			<view class="nav-item nav-item-last" @click="navigatorToIntelligenceTrainingPage">
				<!-- 图标 -->
				<view class="icon4 iconfont icon-naoliyoushiceshi"></view>
				<!-- 名称 -->
				<text>智能训练</text>
			</view>
		</view>
		<!-- 当前任务 -->
		<view class="task">
			<view class="title">当前任务</view>
			<view class="task-list">
				<template v-if="taskPaper.length != 0">
				<view class="task-item" v-for="item in taskPaper">
					<text class="task-item-title">任务一：</text>
					<text class="task-item-content">{{item.title}}</text>
				</view>
				</template>
				<view v-else class="task-item">暂时没有任务</view>
			</view>
			<view class="more" @click="navigatorToTaskCenterPage">更多</view>
		</view>
		<!-- 试卷中心 -->
		<view class="examination">
			<view class="title">固定试卷</view>
			<view class="examination-list" >
				<template v-if="fixedPaper.length != 0">
				<view class="examination-item" v-for="item in fixedPaper">
					<view class="examination-item-first">
						<view class="subject">
							<text>学科：</text>
							<text>{{item.subjectName | snippet}}</text>
						</view>
						<view class="score">
							<text>总分：</text>
							<text>{{item.score}}</text>
						</view>
					</view>
					<view class="examination-item-second">
						<view class="number">
							<text>题目数：</text>
							<text>{{item.questionCount}}</text>
						</view>
						<view class="time">
							<text>考试时长：</text>
							<text>{{item.suggestTime}}分钟</text>
						</view>
					</view>
				</view>
				</template>
				<view class="examination-item" v-else>暂无该类型试卷</view>
			</view>
			<view class="more" @click="navigatorToTestCenterPage(1)">更多</view>
		</view>
		<!--时段试卷-->
		<view class="examination">
			<view class="title" style="background: #E0620D;">时段试卷</view>
			<view class="examination-list" >
				<template v-if="timeLimitPaper.length != 0">
				<view class="examination-item" style="border-left: 10rpx solid #E0620D;background: rgba(224,98,13,0.3);" v-for="item in timeLimitPaper">
					<view class="examination-item-first">
						<view class="subject">
							<text>学科：</text>
							<text>{{item.subjectName | snippet}}</text>
						</view>
						<view class="score">
							<text>总分：</text>
							<text>{{item.score}}</text>
						</view>
					</view>
					<view class="examination-item-second">
						<view class="number">
							<text>题目数：</text>
							<text>{{item.questionCount}}</text>
						</view>
						<view class="time">
							<text>考试时长：</text>
							<text>{{item.suggestTime}}分钟</text>
						</view>
					</view>
				</view>
				</template>
				<view class="examination-item" style="border-left: 10rpx solid #E0620D;background: rgba(224,98,13,0.3);" v-else>暂无该类型试卷</view>
			</view>
			<view class="more" style="color:#E0620D;" @click="navigatorToTestCenterPage(2)">更多</view>
		</view>
		<!--班级试卷-->
		<view class="examination">
			<view class="title" style="background:#13227A;">班级试卷</view>
			
			<view class="examination-list" >
				<template v-if="clazzPaper.length != 0">
				<view class="examination-item" style="border-left: 10rpx solid #13227A;background: rgba(19,34,122,0.3);" v-for="item in clazzPaper">
					<view class="examination-item-first">
						<view class="subject">
							<text>学科：</text>
							<text>{{item.subjectName | snippet}}</text>
						</view>
						<view class="score">
							<text>总分：</text>
							<text>{{item.score}}</text>
						</view>
					</view>
					<view class="examination-item-second">
						<view class="number">
							<text>题目数：</text>
							<text>{{item.questionCount}}</text>
						</view>
						<view class="time">
							<text>考试时长：</text>
							<text>{{item.suggestTime}}分钟</text>
						</view>
					</view>
				</view>
				</template>
				<view class="examination-item" v-else style="border-left: 10rpx solid #13227A;background: rgba(19,34,122,0.3);">暂无该类型试卷</view>
			</view>
			
			<view class="more" style="color:#13227A;" @click="navigatorToTestCenterPage(4)">更多</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//轮播图
			indicatorDots: true,//是否显示面板指示点
			autoplay: true, //是否自动切换
			interval: 2000, //自动切换时间间隔 
			duration: 500, //滑动动画时长
			imgUrls:[{
				url: "https://img2.baidu.com/it/u=2606943158,1225302912&fm=26&fmt=auto",
				id: "0"
			},{
				url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F061920114Z1%2F200619114Z1-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638804253&t=5c0e510199bd46e4e56087d8fd97a64c",
				id: "1"
			},{
				url: "https://img0.baidu.com/it/u=2584189207,1645431323&fm=26&fmt=auto",
				id: "2"
			}],
			fixedPaper: [] ,//固定试卷
			timeLimitPaper: [],//时段试卷
			clazzPaper:[], //班级试卷
			taskPaper:[]
		}
	},
	//下拉属性
	onPullDownRefresh(){
		
		
		setTimeout( ()=>{this.getExamPaperList( ()=> {uni.stopPullDownRefresh()})},1000);
	},
	onLoad: function(){
		//获取token
		let token = uni.getStorageSync("token");
		console.log(!token);
		if( !token){
			// uni.showToast({
			// 	title: "请先登录！！"
			// })
			uni.redirectTo ({
				url: "/pages/login/login"
			});
		}
		this.getExamPaperList();
		//查询当前用户信息
		this.getUnReadCount();
	},
	methods: {
		async getUnReadCount(){
			const resp = await this.$myRequest({
				url: "/api/student/user/message/unreadCount"
			});
			if(resp.data.code == 200 && resp.data.obj != 0){
				uni.showToast({
					title: "您有"+ resp.data.obj +"条数据未读",
				})
			}
		},
		async getExamPaperList(callback){
			
			const resp = await this.$myRequest({
				 url:"/api/student/dashboard/index"
			});
			
			if(resp.data.code == 200){
				this.fixedPaper = resp.data.obj.fixedPaper;
				this.timeLimitPaper = resp.data.obj.timeLimitPaper;
				this.clazzPaper = resp.data.obj.clazzPaper;
			}
			
			const taskResp = await this.$myRequest({
				url: "/api/student/dashboard/task"
			});
			if( taskResp.data.code == 200){
				if(taskResp.data.obj.length > 3){
					this.taskPaper = taskResp.data.obj.slice(0,3);
				}else{
					this.taskPaper = taskResp.data.obj;
				}
			}
			
			callback && callback();
			
		},
		navigatorToVideoLessonPage(){
			uni.navigateTo({
				url: "/pages/video-lesson/video-lesson"
			})
		},
		navigatorToTaskCenterPage(){
			uni.navigateTo({
				url: "/pages/task-center/task-center"
			})
		},
		navigatorToTestCenterPage(value){
			uni.navigateTo({
				url: "/pages/test-center/test-center"
			})
		},
		navigatorToIntelligenceTrainingPage(){
			uni.navigateTo({
				url: "/pages/intelligence-training/intelligence-training"
			})
		}
	}
}
</script>

<style lang="scss">
page{
	background-color: #F2F2F2;
}
.home{
	// font-family: "华文楷体";
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	.swiper{
		width: 92%;
		height: 388rpx;
		margin: 30rpx 0;
		/deep/ .uni-swiper-wrapper{
			border-radius: 20rpx !important;
		}
		.swiper-item{
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
	}
	.nav{
		display: flex;
		width: 92%;
		margin: 40rpx 0;
		.nav-item{
			flex:1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin: 0 14rpx;
			width: 160rpx;
			height: 114rpx;
			position: relative;
			.iconfont{
				font-size: 80rpx;
				position: absolute;
				left: 50%;
				bottom:34%;
				transform: translate(-50%,-50%);
			}
			.icon1{
				background-image: -webkit-linear-gradient(top,#B4FF00 75%,#ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent; 
			}
			.icon2{
				background-image: -webkit-linear-gradient(top,#A5B6F9 75%,#ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent; 
			}
			.icon3{
				background-image: -webkit-linear-gradient(top,#E0620D 75%,#ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent; 
			}
			.icon4{
				background-image: -webkit-linear-gradient(top,#13227A 75%,#ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent; 
			}
			text{
				font-size: 24rpx;
				font-weight: 300;
				margin-top: 20rpx;
			}
		}
		.nav-item-first{
			margin-left: 0rpx;
		}
		.nav-item-last{
			margin-right: 0rpx;
		}
	}
	.task{
		display: flex;
		width: 88%;
		margin: 30rpx 0 0 24rpx;
		padding: 35rpx 0;
		border-radius: 20rpx;
		background-color: #ffffff;
		position: relative;
		.title{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 172rpx;
			height: 60rpx;
			border-radius: 40rpx;
			background-color: #AAFB28;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			left: 0;
			top: 0;
			transform: translate(-15%,-50%);
		}
		.task-list{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;
			padding: 16rpx 40rpx 0 40rpx;
			// padding-left: 40rpx;
			.task-item{
				// height: 40rpx;
				// line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 300;
				color : #212121;
				margin: 10rpx 0rpx;
				padding-left: 15rpx;
				border-left: 10rpx solid #AAFB28;
				.task-item-title{
					
				}
				.task-item-content{
					
				}
			}
		}
		.more{
			position: absolute;
			right: 30rpx;
			top : 22rpx;
			font-size: 28rpx;
			color:#AAFB28;
		}
	}
	
	.examination{
		display: flex;
		width: 88%;
		margin: 70rpx 0 20rpx 24rpx;
		padding: 35rpx 0;
		border-radius: 20rpx;
		background-color: #ffffff;
		position: relative;
		.title{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 172rpx;
			height: 60rpx;
			border-radius: 40rpx;
			background-color: #A5B6F9;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			left: 0;
			top: 0;
			transform: translate(-15%,-50%);
		}
		.examination-list{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;
			padding: 20rpx 40rpx 0 40rpx;
			.examination-item{
				background-color: rgba(112,128,193, 0.1);
				font-size: 28rpx;
				font-weight: 300;
				color : #212121;
				margin: 10rpx 0;
				padding-left: 15rpx;
				border-left: 10rpx solid #A5B6F9;
				.examination-item-first,.examination-item-second{
					display: flex;
					margin: 10rpx 0;
				}
				.examination-item-first{
					.subject{
						flex:1;
					}
					.score{
						flex:1;
					}
				}
				.examination-item-second{
					.number{
						flex:1;
					}
					.time{
						flex:1;
					}
				}
				
			}
		}
		.more{
			position: absolute;
			right: 30rpx;
			top : 22rpx;
			font-size: 28rpx;
			color:#A5B6F9;
		}
	}
}
</style>
